import React, { Component } from 'react'
import './style.scss'
import { array, func } from 'prop-types'

class GoodFood extends Component {
  render() {
    const { onClick, data } = this.props
    return (
      <div className='good-food'>
        <h1>精品好菜</h1>
        <div>
          {data.map((item, index) => (
            <dl key={item.id} onClick={e => onClick(item, e)}>
              <dt>
                <img src={item.img} />
              </dt>
              <dd>
                <h3>{item.name}</h3>
                <p>1000浏览 2000收藏</p>
              </dd>
            </dl>
          ))}
        </div>
      </div>
    )
  }
}

GoodFood.propTypes = {
  data: array.isRequired,
  onClick: func
}
GoodFood.defaultProps = {
  onClick: () => {}
}

export default GoodFood
